<template>
    <div>
        <div v-if="active==1">
            <div class="header" style="background-color: white">
                <el-page-header @back="goBack" content="我的待办事项">
                </el-page-header>
            </div>
            <el-divider></el-divider>
            <el-form ref="form" :model="params">
                <el-container>
                    <el-form-item>
                        <el-input placeholder="审批流程名称" v-model="params.flowName"></el-input>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-date-picker
                                v-model="params.createdate"
                                type="date"
                                placeholder="审批发起开始时间" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item style="margin-left: 20px">
                        <el-date-picker
                                v-model="params.createdate1"
                                type="date"
                                placeholder="审批发起结束时间" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>

                    <el-form-item style="margin-left: 20px">
                        <el-button type="primary" @click="onSubmit">搜索</el-button>
                    </el-form-item>
                </el-container>
            </el-form>

            <el-table
                    :data="pageResult.records"
                    border
                    style="width: 100%">
                <el-table-column
                        fixed
                        prop="fid"
                        label="序号">
                </el-table-column>
                <el-table-column
                        prop="flowName"
                        label="审批流程名称">
                </el-table-column>
                <el-table-column
                        prop="createdate"
                        label="审批发起时间">
                </el-table-column>
                <el-table-column
                        prop="userRealname"
                        label="提交人">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope" >
                        <el-button @click="handleClick(scope.row)" type="text" size="small"   v-if="scope.row.status=='A'" >办理</el-button>
                        <el-button @click="handleRemove(scope.row)" type="text" size="small"   v-if="scope.row.status!='A'" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-footer class="case-exam-footer">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="pageResult.total"
                        :page-size="pageResult.size"
                        class="pagination"
                        @current-change="handleIndexChange"
                >
                </el-pagination>
            </el-footer>
        </div>

        <handle @back="back" @completed="completed" :row="rows" v-if="active==2"></handle>
    </div>
</template>

<script>

    const Handle = () => import('./Handle.vue')

    import FormService from '../../../model/mfy/form/FormService.js'
    const formService=FormService.getInstance();

    import ThreeDadsService from '../../../model/mfy/threeDads/ThreeDadsService.js'
    const threeDadsService=ThreeDadsService.getInstance();

    export default {
        name: "Mybacklog",
        data(){
            return{
                pageResult:{},
                params:{},
                rows:{},
                active:1
            }
        },
        created(){
            this.selectMybacklog();
        },
        methods:{
            selectMybacklog(){
                formService.selectMybacklog(this.params).then((response=>{
                   this.pageResult=response.data.data;
                }))
            },
            handleIndexChange(index){
                this.params.page = index
                this.selectMybacklog()
            },
            onSubmit(){
                this.params.page=1;
                this.selectMybacklog();
            },
            handleClick(row){
                var params ={}
                params.id=row.id
                params.target=row.target
                params.flowName=row.flowName
                threeDadsService.list(params).then((response)=>{
                    this.rows=response.data.data;
                    this.rows.current=row.current;
                    this.rows.fid = row.fid
                    if(row.flowName.indexOf('退款')!=-1){
                        this.rows.target='tk'
                    }
                    this.active++
                })
            },
            handleRemove(row){
                this.$confirm('确定删除该记录？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    formService.remove(row.fid).then(response => {
                        if(response.data.code === 0){
                            this.$message.success({
                                message:'删除成功',
                                duration:'1000'
                            })
                            this.selectMybacklog()
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                        duration:1000
                    });
                });
            },
            goBack(){
                history.back()
            },
            back(){
                this.active = 1
            },
            completed(){
                this.active = 1
                this.selectMybacklog()
            }
        },
        components:{
            Handle,
        }
    }
</script>

<style scoped>
    .case-exam-footer{
        width: 100%;
        position: relative;
    }
    .pagination{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
</style>
